<template>
	<div>
		<el-row type="flex">
			<el-col :span="12">
				<div class="grid-content">

				</div>
			</el-col>
			<el-col :span="12">
				<div class="grid-content bg-purple-dark">
					<div class="grid-content bg-purple-dark">
						<el-input placeholder="请输入内容" v-model="input3" class="input-with-select" 
							show-word-limit>
							<el-select v-model="select" slot="prepend" placeholder="请选择">
								<el-option label="货运单号" value="danhao">
									
								</el-option>
								
							</el-select>
							<el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
						</el-input>
					</div>
				</div>
			</el-col>
		</el-row>


		<el-row type="flex">
			<el-col :span="5">
				<div></div>
			</el-col>
			<el-col :span="14">
				<div class="grid-content bg-purple-dark">
					<el-table :data="tableData" border style="width: 100%;">
						<el-table-column fixed prop="fid" label="货运单编号" width="250">
						</el-table-column>
						<el-table-column prop="name" label="客户姓名" width="120">
						</el-table-column>
						<el-table-column prop="tel" label="客户电话" width="120">
						</el-table-column>
						<el-table-column prop="status" label="当前状态" width="120">
							<template slot-scope="scope">
								<span v-if="scope.row.status == 0">待发货</span>
								<span v-if="scope.row.status == 1">运输</span>
								<span v-if="scope.row.status == 2">中转</span>
								<span v-if="scope.row.status == 3">到货</span>
								<span v-if="scope.row.status == 4">提货</span>
								<span v-if="scope.row.status == 5">已提</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="150">
							<template slot-scope="scope">
								<el-button type="primary" plain size="small" @click="send(scope.$index)">
									发送短信
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="block">

						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage" :page-sizes="[5,10]" :page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper" :total="total">
						</el-pagination>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	//输入框
	export default {
		
		data() {
			return {
				input3: '',
				select: '',
				//表格
				tableData: [],
	
				//分页
				currentPage: 1,
				pageSize: 5,
				total: 5,
			}
		},
		//查询所有货运单合同与货物状态
		created() {
			//查询所有:第一页
			this.getPageChange();
			//查询总条数
			this.getTotal();
		},
		//表格方法
		methods: {
			//模糊搜索:
			search(){
				
				this.axios.get("http://localhost:8080/fc/" + this.input3 )
					.then((res) => {
						this.tableData=[];
						let sqlData = res.data.data;
						
						console.log(res)
							this.tableData.push({
								fid: sqlData.fid,
								name: sqlData.customerIn.name,
								tel: sqlData.customerIn.tel,
								status: sqlData.freightStatus.status,
						
							})
						
						
						this.total = 1;
					});
				
				
				
			},
			

			handleClick(row) {
				console.log(row);
			},
			
			//获取总条数：
			getTotal() {
				this.axios.get("http://localhost:8080/fc/", )
					.then((res) => {

						let sqlData = res.data.data;

						this.total = sqlData.length;
					})
			},
			//分页查询:查询货运合同
			getPageChange() {
				this.axios.get("http://localhost:8080/fc/" + this.currentPage + "/" + this.pageSize, )
					.then((res) => {

						let sqlData = res.data.data.list;

						for (let i = 0; i < sqlData.length; i++) {

							this.tableData.push({
								fid: sqlData[i].fid,
								name: sqlData[i].customerIn.name,
								tel: sqlData[i].customerIn.tel,
								status: sqlData[i].freightStatus.status,

							})


						}
					})
			},
			//分页方法
			handleSizeChange(val) {
				this.tableData = [];
				this.pageSize = val;
				this.getPageChange();
			},
			handleCurrentChange(val) {
				this.tableData = [];
				this.currentPage = val;
				this.getPageChange();
			},
			//发送短信
			send(index){
				
				this.$confirm('向客户发送短信, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.axios.post("http://localhost:8080/reply",{
						id:null,
						fid:this.tableData[index].fid,
						noticeContent:"",
						noticeTime:new Date(),
						
						notifier:localStorage.getItem("name"),
					}).then((res)=>{
						
					})
					this.$message({
						type: 'success',
						message: '发送成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消发送'
					});
				});
			},
			
			
		},


	}
</script>

<style>
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	.el-select .el-input {
		width: 130px;

	}

	.input-with-select .el-input-group__prepend {
		background-color: #fff;
	}

	.block {
		background-color: #ffffff;
	}
</style>
